<template>
    <div class="login">
        <van-form class="form" @submit="login">
            <div class="avatar">
                <img src="/assets/images/avatar.png" />
            </div>

            <van-field 
                v-model="business.mobile"
                name="mobile"
                placeholder="手机号码"
                left-icon="phone-o"
                required
                :rules="[
                    { required: true, message: '请填写手机号码' },
                    {pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确'}
                ]"
            />

            <van-field 
                v-model="business.password"
                type="password"
                name="password"
                placeholder="密码"
                left-icon="warn-o"
                required
                :rules="[{ required: true, message: '请填写密码' }]"
            />

            <div class="button">
                <van-button round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">注 册 / 登 录</van-button>
            </div>
                
            <div class="forget">
                <router-link to="/">返回首页</router-link>
            </div>
        </van-form>
    </div>
</template>

<script setup>
    // 获取类似于vue2的this对象
    const { proxy } = getCurrentInstance();

    // 创建数据
    let business = ref({
        mobile: '18888888888',
        password: '123123'
    })

    // 推荐人的token
    const token = ref('');

    // 挂载前的生命周期
    onBeforeMount(async () => {

        // 获取token
        token.value = proxy.$route.query.token ? proxy.$route.query.token : '';

        if(token.value)
        {
            // 存储到cookie，防止token不见
            proxy.$cookies.set('token',token.value);
        }

        // 客户是否已经登录了

        // 调用验证登录函数
        let result = await proxy.$check();

        //如果有登录，就不重复登录
        if(result.code == 1)
        {
            // 提醒
            proxy.$success({
                message: "您已登录无需重复登录",
                onClose: () =>
                {
                    let redirect = proxy.$cookies.get('redirect') ? proxy.$cookies.get('redirect') : '/business';

                    // 跳转
                    if(redirect.path)
                    {
                        // 登录成功后删除重定向地址
                        proxy.$cookies.remove('redirect');
                        
                        redirect.replace = true;

                        proxy.$router.push(redirect);
                    }else{
                        proxy.$router.push(redirect);
                    }
                }
            });
        }
    })

    const login = async () => 
    {
        // 获取token
        let Token = token.value ? token.value : proxy.$cookies.get('token');

        // 如果token存在就追加参数里
        if(Token)
        {
            business.value.token = Token;
        }

        // 发起请求
        let result = await proxy.$POST({
            url:'/business/login',
            params:business.value
        });

        // 当code等于1时，说明操作成功
        if(result.code === 1)
        {
            // 登录成功提醒并跳转
            proxy.$success({
                message:result.msg,
                onClose:() => 
                {
                    // 将business数据存放到pinia中
                    proxy.$business.value = result.data;

                    let redirect = proxy.$cookies.get('redirect') ? proxy.$cookies.get('redirect') : result.url;

                    // 跳转
                    if(redirect.path)
                    {
                        // 登录成功后删除重定向地址
                        proxy.$cookies.remove('redirect');

                        redirect.replace = true;

                        proxy.$router.push(redirect);
                    }else{
                        proxy.$router.push({path:redirect});
                    }

                    // 清空
                    if(Token)
                    {
                        proxy.$cookies.remove('token');
                    }
                }
            })
        }else
        {
            // 提示错误信息
            proxy.$fail(result.msg);
        }
    }

</script>


<style scoped>
@import url('/assets/css/login.css');
</style>